<template>
    <div>   
        <el-table
        height="700"
        :data="data"
        style="width: 100%">
            <el-table-column
            fixed
            prop="id"
            label="id"
            width="50">
            </el-table-column>
            <el-table-column
            prop="name"
            label="分类名"
            width="180">
            </el-table-column>

           <el-table-column
            prop="img.url"
             width="100"
            label="缩略图">
               

               
                <template slot-scope="scope">
                   
                    <img  :src="scope.row.url" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>

            <el-table-column
            fixed="right"
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    v-show='scope.row.onShow==1'
                    size="mini"
                    type='danger'
                    @click="handleDown(scope.$index, scope.row)">下架</el-button>
                    <el-button
                    v-show='scope.row.onShow==2'
                    size="mini"
                    type='success'
                    @click="handleDown(scope.$index, scope.row)">上架</el-button>

                    

                    <el-button
                    size="mini"
                    type="danger" 
                    plain
                    
                    
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class='pagination'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
       
        
        layout="total, prev, pager, next, jumper"
        >
        </el-pagination>

    </div>
</template>

<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
    name:'TypeTable',
    data() {
        return {
            
            data:[
               
            ],
            url:'',
            listIndex:''
            
            
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    activated() {
        this.getListInfoByPage()
    },
    methods: {
        getListInfoByPage (){
            // console.log(this.baseUrl)
            // console.log(this.currentPage)
            axios.get(
                this.baseUrl+'category/all',
                {
                    params:{
                        id:true
                    }
                })
            .then(this.getInfoSucc)
        },
        getInfoSucc (response){
            console.log(response)
            // console.log(response.data[0].img.url)
            this.data = response.data
            for(var i =0;i<this.data.length;i++){
                if(this.data[i].img!=null){
                    this.url = this.data[i].img.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                
            }
            // console.log(this.data)
            
        },
        handleSizeChange(val) {
         
        },
        handleCurrentChange(val) {
          
            
        },
       
         handleEdit(index, row) {
            console.log(index);
            console.log(row)
        },
        handleDelete(index, row) {
            this.listIndex = index;
            this.delete(row.id)
        },
        delete(id){
            axios.get(
                this.baseUrl+'cms/giftsDelete',
                {
                    params:{
                        id:id,
                        
                    }
                })
            .then(this.deleteSucc)
        },
        deleteSucc(response){
            var that = this;
            if(response.data==1){
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration:'3000',
                    showClose:true,
                    });
                this.data.splice(that.listIndex,1)    
            }else if(response.data==0){
                 this.$message({
                    message: '删除失败',
                    type: 'warning',
                    duration:'3000',
                    showClose:true,
                    });
                    
            }
        }
    },
}
</script>

<style lang="stylus" scoped>
.pagination
    margin 0 auto
                .name-wrapper
                    display inline-block    
</style>
  